<template>
	<view>
		<view class="text-line-box">
			<image class="close-img" src="../../../../static/message_icon_tips@2x.png"></image>
			<text>费用单已出，请尽快还款</text>	
		</view>
		
		<view class="item1">

			<view class="title-wrap" style='margin: 0;height: auto;margin-bottom: 14upx;'>
				<view class='title-text'>
					费用详情
				</view>
				<view class='title-text-box'>
					{{details.rentTypeName}}
				</view>
			</view>

			<u-line color="#efefef" dashed margin="0 0 15px"></u-line>

			<view class="text-line1">
				<text class="text-name">还款状态:</text>
				<text class="text-value">{{filterNull(details.statusName)}}</text>
			</view>

			<view class="text-line1">
				<text class="text-name">付款类型:</text>
				<text class="text-value">{{filterNull(details.collectionTypeName)}}</text>
			</view>

			<view class="text-line1" v-if="details.collectionType==2">
				<text class="text-name">还款期数:</text>
				<text class="text-value">{{filterNull(details.stage)}}</text>
			</view>

			<view class="text-line1">
				<text class="text-name">应还日期:</text>
				<text class="text-value">{{filterNull(details.receivableDate)}}</text>
			</view>

			<view class="text-line1">
				<text class="text-name">应还总金额:</text>
				<text class="text-value"
					style="color: #009B01;">￥{{details.receivableAmount?details.receivableAmount:'0'}}</text>
			</view>

			<view class="text-line1">
				<text class="text-name">已还总金额:</text>
				<text class="text-value">￥{{details.receivedAmount?details.receivedAmount:'0'}}</text>
			</view>
			<view class="text-line1">
				<text class="text-name">欠款金额:</text>
				<text class="text-value" style="color: #009B01;">￥{{filterNull(details.uncollectedAmount)}}</text>
			</view>
			<view class="text-line1">
				<text class="text-name">逾期天数</text>
				<text class="text-value">{{details.overdueDays?details.overdueDays+'天':'0'}}</text>
			</view>

		</view>


		<!-- <view class="item1 " v-if="details.uncollectedAmount>0">

			<view class="coupon-wrap">
				<text class="coupon-wrap-title">优惠券</text>
				<view class="coupon-wrap-sel" @click="selCoupon">
					<text
						v-if="discountItem && discountItem.money>0" class='coupon'>{{discountItem.couponName+" "}}￥{{discountItem.money}}</text>
					<text v-else class='coupon'>{{canuselist.length>0?'选择优惠券':'无可用优惠券'}}</text>
				</view>
				<u-icon name="arrow-right" color="#333" size="14"></u-icon>
			</view>

			<view class="text-line1">
				<text style="font-size: 24upx;color: #333333;">应付金额(元):</text>
				<text style="font-size: 24upx;color: #009B01;margin-left: 10upx;">{{details.uncollectedAmount}}</text>
			</view>
			<view class="text-line1">
				<text style="font-size: 24upx;color: #333333;">优惠金额(元):</text>
				<text
					style="font-size: 24upx;color: #009B01;margin-left: 10upx;">{{discountItem && discountItem.money ? discountItem.money:'0'}}</text>
			</view>
			<view class="text-line1">
				<text style="font-size: 24upx;color: #333333;">实付金额(元):</text>
				<text style="font-size: 24upx;color: #009B01;margin-left: 10upx;">{{realpay}}</text>
			</view>

		</view> -->

		<view class="item1">
			<view class="title-wrap" style='margin: 0;height: auto;margin-bottom: 14upx;'>
				<view class='title-text1'>
					<text>订单编号:</text>
					<text>{{filterNull(details.businessNo)}}</text>
				</view>
				<view >
					
				</view>
			</view>
			<u-line color="#efefef" dashed margin="0 0 15px"></u-line>
			
			<view class="text-line1">
				<text class="text-name">经销商:</text>
				<text class="text-value">{{filterNull(details.tenantName)}}</text>
			</view>
			
			<view class="text-line1" v-if="details.rentType!=6">
				<text class="text-name">租赁时间:</text>
				<text
					class="text-value">{{filterNull(details.timeStartRent)}}至{{filterNull(details.timeFinishRent)}}</text>
			</view>
		
			<!-- <view class="text-line1">
				<text class="text-name">付款类型:</text>
				<text class="text-value">{{filterNull(details.collectionTypeName)}}</text>
			</view> -->
		
			<view class="text-line1" v-if="details.rentType==5 && details.collectionType==3">
				<text class="text-name">金融公司:</text>
				<text class="text-value">{{filterNull(details.financeCompanyName)}}</text>
			</view>
		
			<view class="text-line1"
				v-if="(details.rentType==5 && details.collectionType==4) || details.rentType==2 || details.rentType==1">
				<text class="text-name">付款日:</text>
				<text class="text-value">{{filterNull(details.paymentDay)}}</text>
			</view>
		
			<view class="text-line1" v-if="details.moneyPlanList!=null || details.moneyPlanList.length>0"
				v-for="(item, index) in details.moneyPlanList" :key='index'>
				<text class="text-name">{{item.moneyDesc}}:</text>
				<text class="text-value"
					v-if="item.moneyAmount=='0.00' || item.moneyAmount=='0'">￥{{item.moneyAmount}}</text>
				<text class="text-value" v-else>￥{{filterNull(item.moneyAmount)}}</text>
			</view>
		
		</view>
		
		<!-- <view class="item1" v-if="isEnv!=3 && details.uncollectedAmount>0 && showDaikou">

			<view class="title-wrap">
				<u-icon name="order" color="#009B01" label="支付方式" label-color="#333333"></u-icon>
			</view>

			<u-line color="#efefef" dashed margin="0 0 10px"></u-line>

			<view style="margin-left: 40upx;">
				<u-radio-group v-model="selType" placement="column" @change="groupChange">
					<u-radio labelSize="12px" size="16" :customStyle="{marginBottom: '8px'}"
						v-for="(pitem, pindex) in payTypeList" :key="pindex" activeColor="#009B01" :label="pitem"
						:name="pitem" @change="radioChange">
					</u-radio>
				</u-radio-group>
			</view>

		</view>

		<view v-if="details.uncollectedAmount>0" style="height:150upx"></view> -->

	<!-- 	<view class="bottom-btn bottom" v-if="isEnv!=3 && details.uncollectedAmount>0">
			<text @click="btnClick">立即支付 ￥{{realpay}}</text>
		</view> -->

		<u-popup safeAreaInsetTop mode="bottom" :show="showCoupon" round="10" closeable @close="closePop">

			<view class="pop" @touchmove.stop.prevent="preventHandler">
				<text class="pop-title">优惠券</text>

				<view class="pop-top-wrap">
					<text style="font-size: 28upx;color: #131313;font-weight: bold;"
						:style="{color:(selectUse===0?'#009B01':'#131313')}"
						@click="selUse(0)">可用优惠券（{{canuselist.length}}）</text>
					<text style="margin-left: 64upx;font-size: 28upx;color: #131313;font-weight: bold;"
						:style="{color:(selectUse===1?'#009B01':'#131313')}"
						@click="selUse(1)">不可用优惠券（{{nouselist.length}}）</text>

				</view>

				<text style="font-size: 24upx;color: #333333;margin: 25upx 0 0;" v-if="selectUse===0 && tempSelect>=0">
					已选中优惠券，使用优惠券1张，共抵扣￥{{tempDiscount}}
				</text>

				<view style="height: 25upx;"></view>

				<scroll-view scroll-y="true" style="height: 500upx;">

					<template v-if="couponList.length > 0">

						<view class="coupon-item" v-for="(citem, cindex) in couponList" :key="citem.memberId"
							@click="couponItemclick(cindex)">

							<view v-if="selectUse===0">
								<u-icon name="checkmark-circle-fill" color="#333333" v-if="tempSelect === cindex">
								</u-icon>

								<u-icon name="checkmark-circle" color="#333333" v-else></u-icon>
							</view>

							<view class="wrap">

								<view class="content">
									<view class="leftContent">
										<view class="amount">
											<view class="couponAmount">
												<text class="amount_unit">¥</text>
												<text class="realAmount">{{citem.money}}</text>
											</view>
											<text class="useInfo">满{{citem.conditionMoney}}可用</text>
										</view>
										<view class="contentInfo">
											<text class="activity-name">{{filterNull(citem.couponName)}}</text>
											<text
												style="margin-top: 20upx;color: #666;font-size: 16upx;">{{filterNull(citem.useTypeName)}}</text>
											<text class="time">{{filterNull(citem.preferentialInfo)}}</text>
											<view class="useType" @click="changeDesc">
												<text class="conponType">{{citem.useType === 1?'全场通用 ':'指定类型'}}</text>
												<image v-if="false" class="arrow"
													src="/static/coupon/coupon_up.png" mode=""></image>
											</view>

										</view>

									</view>
									<view class="rightContent">
										<text class="conponType1">{{filterNull(details.rentTypeName)}}</text>
									</view>
								</view>

								<image class="cover" src="/static/mine/coupon-bg.png" mode="scaleToFill">
								</image>

							</view>
						</view>
					</template>

					<template v-else>
						<u-empty mode="coupon" text="暂无优惠券" />
					</template>

				</scroll-view>

				<button class="pop-btn" @click="commitCoupon">确定</button>

			</view>

		</u-popup>

	</view>
</template>

<script>
	import {
		receivableinfo,
		payOrderCoupon,
		apppay,
		commonenv,
		paycancel,
		getDaiKouFlag
	} from '../../../../common/api.js';

	export default {
		data() {
			return {
				isEnv: 0,
				receivablesId: '',

				discountIndex: -1, //选定的优惠券索引
				showCoupon: false,
				couponList: [], //当前展示的列表
				canuselist: [], //可用列表
				nouselist: [], //不可用列表
				selectUse: 0, //0可用 1不可用
				tempSelect: -1, //暂时选择得优惠券索引

				details: {},
				payTypeList: ["微信支付", "卡文支付"],
				selType: "微信支付",
				showDaikou:false
			}
		},
		computed: {
			//实付金额
			realpay() {
				if (this.canuselist[this.discountIndex]) {

					// let v = this.details.uncollectedAmount - this.canuselist[this.discountIndex].money;
					let v = this.details.uncollectedAmount.sub(this.canuselist[this.discountIndex].money);
					return v > 0 ? v : 0;
				} else {
					return this.details.uncollectedAmount
				}
			},
			deptId() {
				return this.$store.state.user.deptId;
			},
			memberNo() {
				return this.$store.state.user.userInfo.customerId;
			},
			//暂时选择的优惠券金额
			tempDiscount() {
				return this.canuselist[this.tempSelect] ? this.canuselist[this.tempSelect].money : 0;
			},
			//选定的优惠券实体
			discountItem() {
				return this.canuselist[this.discountIndex] ? this.canuselist[this.discountIndex] : {};
			}
		},
		methods: {
			getEnv() {
				commonenv().then(res => {
					this.isEnv = res;
				})
			},

			preventHandler() {

			},

			getData() {
				receivableinfo(
					this.receivablesId
				).then(res => {
					this.details = res;


					if (this.details.uncollectedAmount > 0) {
						this.getCouponList();
					}
				})
			},

			//优惠券切换（有用-无用）
			selUse(index) {
				this.selectUse = index;
				if (0 === index) {
					this.couponList = this.canuselist
				} else {
					this.couponList = this.nouselist
				}
			},

			//获取优惠券两个list
			getCouponList() {
				//有用的
				payOrderCoupon({
					memberNo: this.memberNo,
					unitno: this.deptId,
					rentType: this.details.rentType,
					receivableNos: this.details.receivablesNo,
					itemNo: this.details.modelId,
					orderType: 2,
					available: 1,
					pageNo: 1,
					pageNum: 10000
				}).then(res => {
					this.canuselist = res;
					this.couponList = this.canuselist;
				})

				//无用的
				payOrderCoupon({
					memberNo: this.memberNo,
					unitno: this.deptId,
					rentType: this.details.rentType,
					receivableNos: this.details.receivablesNo,
					itemNo: this.details.modelId,
					orderType: 2,
					available: 2,
					pageNo: 1,
					pageNum: 10000
				}).then(res => {
					this.nouselist = res;
				})
			},

			//点击选择优惠券，弹出弹窗
			selCoupon() {
				if (this.canuselist.length > 0) {
					this.showCoupon = true
				}
			},

			//关闭优惠券弹窗
			closePop() {
				this.showCoupon = false
			},

			//优惠券弹窗上的确定按钮
			commitCoupon() {
				this.discountIndex = this.tempSelect;
				this.showCoupon = false
			},

			//优惠券条目点击
			couponItemclick(index) {
				if (this.selectUse === 0) {
					if (this.tempSelect === index) {
						this.tempSelect = -1;
					} else {
						this.tempSelect = index
					}

				}
			},

			//去微信支付
			btnClick() {
				uni.showLoading({
					title: '加载中'
				})

				var isSelectCoupon = this.discountItem && this.discountItem.memberId;

				let flag = isSelectCoupon ? 1 : 2;
				let couponNo = isSelectCoupon ? this.discountItem.memberId : '';
				let couponName = isSelectCoupon ? this.discountItem.couponName : '';
				let couponFaceValue = isSelectCoupon ? this.discountItem.money : '';
				let couponUseValue = isSelectCoupon ? this.discountItem.conditionMoney : '';
				let couponBizType = isSelectCoupon ? this.discountItem.useType : '';
				let couponTypeNo = isSelectCoupon ? this.discountItem.useTypeNo : '';
				let couponTypeName = isSelectCoupon ? this.discountItem.useTypeName : '';
				let couponData = isSelectCoupon ? this.discountItem.preferentialInfo : '';

				let url;
				if ("微信支付" == this.selType) {
					url = "/app/pay";
				} else if ("卡文支付" == this.selType) {
					url = "/app/juhe/pay";
				}

				apppay({
					type: 1,
					receivablesId: this.details.receivablesId,
					couponFlag: flag,
					couponNo: couponNo,
					couponName: couponName,
					couponFaceValue: couponFaceValue,
					couponUseValue: couponUseValue,
					couponBizType: couponBizType,
					couponTypeNo: couponTypeNo,
					couponTypeName: couponTypeName,
					couponData: couponData,
					deptId: this.deptId,
				}, url).then(res => {
					uni.hideLoading()

					let resultData = res;

					//唤起微信支付
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.timeStamp,
						nonceStr: res.nonceStr,
						package: res.package,
						signType: res.signType,
						paySign: res.paySign,
						success: function(res) {
							uni.$u.toast('支付成功')
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						},
						fail: function(err) {
							paycancel({
								payRecordId: resultData.payRecordId
							}).then(res => {

							})
						}
					});

				}).catch(e => {
					uni.hideLoading()
				})
			}

		},
		onLoad(op) {
			this.receivablesId = op.receivablesId;
			this.getData();
			this.getEnv();
			getDaiKouFlag().then(res=>{
				this.showDaikou = res==1
			})
		}
	}
</script>

<style lang="scss" scoped>
	.coupon{
		color:#FF6A15 ;
		font-size: 26upx;
	}
	.title-text1{
		color:#000000;
		font-size: 28upx;
	}
	.text-line1{
		margin-bottom: 16upx;
		.text-name{
			margin-right: 8upx;
		}
		text{
			font-size: 24upx;
			color:#666666;
		}
	}
	.item1{
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		border-radius: 8upx;
		margin: 32upx;
		padding: 32upx;
		.title-text {
			font-size: 32upx;
			color: #000000;
			font-weight: bold;
			margin-bottom: 16upx;
		}
		.title-text-box{
			background-color: #DDEFFE;
			color:#173B42;
			font-size: 26upx;
			padding:4upx 16upx;
			border-radius: 4upx;
		}
	}
	.text-line-box{
		height: 64upx;
		background-color: rgba(200, 221, 65, 0.20);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left:32upx;
		border-radius: 4upx;
		.close-img{
			width: 32upx;
			height: 32upx;
			margin-right: 16upx;
		}
		text{
			font-size: 24upx;
			color:#173B42 ;
		}
	}

	.order-status {
		// position: absolute;
		// right: 0;
		height: 40upx;
		padding: 5upx 20upx;
		background: linear-gradient(#15e8c9 0%, #13ceb5 100%);
		border-radius: 20px 0px 0px 20px;
		font-size: 26upx;
		font-weight: 500;
		text-align: center;
		color: #ffffff;
	}

	.coupon-wrap {
		@include flex;
		align-items: center;
		height: 95upx;

		&-title {
			flex-grow: 1;
			font-size: 28upx;
			color: $black33;
			font-weight: bold;
		}

		&-sel {
			font-size: 28upx;
			color: $black33;
			font-weight: bold;
		}
	}

	.pop {
		@include flex(column);
		padding: 30upx 50upx;

		.pop-title {
			font-size: 34upx;
			color: $black13;
			font-weight: bold;
			margin-top: -40upx;
		}

		&-top-wrap {
			display: flex;
			margin-top: 58upx;
		}

		.coupon-item {
			@include flex;
			align-items: center;

		}

		.pop-btn {
			width: 100%;
			height: 70upx;
			line-height: 70upx;
			border-radius: 14upx;
			background-color: $green12;
			text-align: center;
			color: $white;
			margin-top: 30upx;
			font-size: 32upx;
			font-weight: bold;
			letter-spacing: 5upx;
		}

	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 2;
	}

	.wrap {
		// position: relative;
		// padding: 0upx 20upx;
		max-height: 600upx;
	}

	.cover {
		width: 643upx;
		height: 231upx;
		line-height: 231upx;

	}

	.content {
		position: relative;
		display: flex;
		// margin-top: 26upx;

		.leftContent {
			display: flex;
			position: absolute;
			top: 0;
			left: 22upx;
			justify-content: center;

			.amount {
				display: flex;
				width: 216upx;
				height: 190upx;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.couponAmount {
					display: flex;
					align-items: flex-start;
				}
			}

			.contentInfo {
				display: flex;
				flex-direction: column;
				width: 244upx;

				.useType {
					display: flex;
					margin-top: 15upx;
					justify-content: space-between;
					align-items: center;
				}
			}

		}

		.rightContent {
			display: flex;
			flex-direction: column;
			align-items: center;

			width: 174upx;
			position: absolute;
			top: 0;
			right: 0;
		}

	}

	.amount_unit {
		position: relative;
		top: 15upx;
	}

	.realAmount {
		font-size: 67upx;
		font-weight: bold;
		font-family: Eras Bold ITC, Eras Bold ITC-Regular;
		color: #333;
		text-align: center;
		// letter-spacing: -11upx;
	}

	.useInfo {
		// margin-top: 5upx;
		font-size: 21upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: bold;
		color: #333;
	}

	.activity-name {
		margin-top: 40upx;
		color: #333;
		font-size: 20upx;
		font-weight: bold;
		font-family: PingFang SC, PingFang SC-Bold;
	}

	.time {
		margin-top: 25upx;
		color: #666;
		font-size: 16upx;
	}

	.conponType {
		font-size: 20upx;
		color: #666;
	}

	.arrow {
		width: 18upx;
		height: 18upx;
		margin-right: 48upx;
	}

	.conponType1 {
		color: #666;
		font-size: 22upx;
		margin-top: 24upx;
	}

	.button {
		width: 180upx;
		height: 56upx;
		line-height: 56upx;
		background: linear-gradient(0deg, #333333 0%, #614c2c 100%);
		border-radius: 28upx;
		text-align: center;
		font-size: 24upx;
		color: #FFFDC2;
	}
</style>
